
<template>
  <div>
    <div class="div-two">
      <div>
        <img src="@/assets/信息交流.png" class="communication-photo"/>
      </div>
      <p>
        昵称:
        <el-input v-model="name" placeholder="请输入昵称"></el-input>
      </p>
      <p class="ps">
        留言内容:
        <el-input  type="textarea" :autosize="{ minRows: 6, maxRows: 10}" placeholder="请输入留言内容" v-model="content">
        </el-input>
        &nbsp;
        <span :class="{ 'text-color': !onSubmit }" class="len">
          {{ userLength }}/{{ maxLength }}
        </span>
      </p>
      <div>
        <span class="language">请文明发言，共同维护网络安全环境</span>
      </div>
      <p>
        <el-row>
          <el-button type="primary"  @click="add" style="margin-top: 10px;">提交</el-button>
        </el-row>
      </p>
    </div>
    <div>
      <el-divider><i class="el-icon-service" style="size: 25px;color: cornflowerblue;"></i></el-divider>
    </div>
    <div>
      <div v-for="item in list" style="border-bottom: 2px dashed  plum;" >
        <p class="p_content">
          <span class="ly-p1">
            <el-tag type="info" class="et1">昵称：{{ item.name }}</el-tag>
            <el-tag type="info" class="et2">{{ item.time | TimeFilter }}</el-tag>
          </span>
          <el-row>
            <el-button type="success"  @click="praise(item)" class="agree">点赞：{{ item.star }}</el-button>
          </el-row>
        </p>
        <div class="cont_content">
          {{ item.content }}
        </div>
        <p style="margin-bottom: 5px;">
          <el-row>
            <el-button type="info"  @click="del(item, index)" class="cancel">删除</el-button>
          </el-row>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "", 
      content: "", 
      list: [], 
      userLength: 0, 
      maxLength: 100, 
      onSubmit: true, 
    };
  },
  created() {
    //初始化保存
    let liuyan = localStorage.liuyan
    if (liuyan) {
      this.list = JSON.parse(liuyan)
    }
  },
  watch: {
    // 监听器
    content(newVal, oldVal) {
      this.userLength = newVal.length
      if (this.userLength > this.maxLength) {
       
        this.onSubmit = false
      } else {
        this.onSubmit = true
      }
    },
  },
  methods: {
    add() {
      //添加
      if (this.name.trim() == "") {
        //非空判断
        alert("请输入昵称！");
        return;
      } else if (this.content.trim() == "") {
        alert("请输入留言内容！");
        return;
      }

      if (this.userLength > this.maxLength) {
        //字数超出提示
        alert("您的留言字数已超过最大限制！");
        return;
      }

      this.list.push({
        name: this.name,
        content: this.content,
        time: new Date().getTime(),
        star: 0,
      });
      this.name = ""; //提交后清空用户名
      this.content = ""; //提交后清空内容

      this.save(); //本地保存
    },
    del(item, index) {
      //删除
      let rel = window.confirm(`确定要删除${item.name}的留言吗？`);
      if (rel) {
        this.list.splice(index, 1);
        this.save(); //本地保存
      }
    },
    praise(item) {
      //点赞
      item.star++;
      this.save(); //本地保存
    },
    save() {
      //本地保存
      localStorage.liuyan = JSON.stringify(this.list);
    },
  },
  filters: {
    //过滤时间
    TimeFilter(time) {
      let oldDate = new Date(time);
      let newDate = new Date();
      var dayNum = "";
      var getTime = (newDate.getTime() - oldDate.getTime()) / 1000;

      if (getTime < 60 ) {
        dayNum = parseInt(getTime) + "秒前";
      } else if (getTime >= 60  && getTime < 60 * 60) {
        dayNum = parseInt(getTime / 60) + "分钟前";
      } else if (getTime >= 3600 && getTime < 3600 * 24) {
        dayNum = parseInt(getTime / 60/60) + "小时前";
      } else if (getTime >= 3600 * 24 && getTime < 3600 * 24 * 30) {
        dayNum = parseInt(getTime / 3600 / 24) + "天前";
      } else if (getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12) {
        dayNum = parseInt(getTime / 3600 / 24 / 30) + "个月前";
      } else if (time >= 3600 * 24 * 30 * 12) {
        dayNum = parseInt(getTime / 3600 / 24 / 30 / 12) + "年前";
      }

      let year = oldDate.getFullYear();
      let month = oldDate.getMonth() + 1;
      let day = oldDate.getDate();
      let hour = oldDate.getHours();
      let minute = oldDate.getMinutes();
      let second = oldDate.getSeconds();
      return (
        dayNum +
        " " +
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
  },
};
</script>

<style scoped="scoped">
.communication-photo{
  width: 100px;
  height: 100px;
  float: right;
}

.div-two {
  margin-left: 20px;
}

.p_content {
  height: 20px;
  margin-top: 10px;
}

.praise {
  margin-right: 5%;
  float: right;
}

.text-color {
  color: #f56c6c;
}

.el-input {
  display: inline-block;
  height: 47px;
  width: 40%;
  border: 0px;
  border-radius: 0px;
  padding: 12px 5px 12px 15px;
  height: 47px;
}



.ps {
  margin-top: 10px;
}

.el-button {
  margin-right: 5%;
  float: right;
}

.et1 {
  float: left;
}

.et2 {
  margin-left: 2%;
  float: left;
}

.cont_content {
  margin-top: 3%;
  margin-left: 1%;
}

.el-icon-service {
  color: #66378f;
  size: 5px;
}
.language{
  font-size: 13px;
  color: grey;
  margin-left: 1110px;
  margin-bottom: 10px;
}
</style>
